<script setup lang="ts">
import type { UniPopup } from '@uni-helper/uni-ui-types'
import { ref, computed } from 'vue'
import { getCommitStatus, setCommitStatus } from '@/services/my/MyCommit/myCommit'
import { onLoad } from '@dcloudio/uni-app'

// 获取到用户的ID
const userID = uni.getStorageSync('userInfo').id

let flag = ref<boolean>(false)
let isYes = ref<boolean>(false)
let alertDialog = ref<UniPopup | null>(null)
// 切换状态
const changeChange = () => {
  flag.value = !flag.value
}

// 获取到承诺书的状态
const getStatus = async () => {
  const res: any = await getCommitStatus(userID)
  flag.value = res?.data?.result
  isYes.value = res?.data?.result
}
// 发送获取状态请求
onLoad(() => {
  getStatus()
})
// 弹窗文字
const text = computed(() => {
  return flag.value && isYes.value ? '是否取消承诺？' : '是否确认承诺？'
})
// 点击弹出对话框
const click = () => {
  ;(alertDialog.value as UniPopup).open()
}
// 确认事件
const dialogConfirm = async () => {
  if (flag.value && isYes.value) {
    console.log(111)
    setCommitStatus(userID, false)
  } else {
    console.log(222)
    setCommitStatus(userID, true)
  }
  // uni.navigateBack({ delta: 1 })
}
// 关闭事件
const dialogClose = () => {
  console.log('点击关闭')
}
</script>
<template>
  <scroll-view scroll-y class="commitment">
    <view class="titleHeader">参加相亲活动承诺书</view>
    <view class="textFrist">为了保证相亲活动的顺利进行，本人郑重承诺:</view>
    <view class="title"> 一、自我介绍真实无误 </view>
    <view class="text">
      在相亲活动中，本人将如实介绍自己的个人基本情况，包括但不限于姓名、年龄、身高、体重、职业、收入等信息。
      本人确保所提供信息和资料真实、准确、无误。若存在虚假、欺骗、误导等情况，本人将自觉承担由此造成的任何不良后果。
    </view>
    <view class="title"> 二、行为表现规范 </view>
    <view class="text">
      在相亲活动中，本人将严格遵守礼仪规范，秉持诚实、真诚和礼貌的态度与他人交往，维护好自身形象和行为表现。
      不会出现任何不文明、不礼貌的言辞和行为不做引人不适的举动，对他人言行不当的情况及时提醒并协助管理。
      同时，本人也会尽最大努力地主动与对方沟通交流，积极表现自我，为相亲活动增添活力和趣味
    </view>
    <view class="title"> 三、尊重他人隐私 </view>
    <view class="text">
      在相亲活动中，本人将尊重对方的隐私，不会未经对方许可传递、泄露任何与对方有关的信息和资料。
      即便在参加活动过程中，因实名制要求需输入个人资料进行验证等操作，本人也不会将这些资料披
      露给第三方，确保对方的个人隐私安全。
    </view>
    <view class="title"> 四、接收结果冷静对待 </view>
    <view class="text">
      在相亲活动中，本人将接受组织或对方在活动过程中给出的最终结果，尊重他人的选择，并且冷静对待这一结果，不会出现
      任何失控和粗暴的行为。同时，本人将尽可能客观地反思自己在活动中的表现和不足，为今后的相亲活动做出积极的调整和改进
    </view>
    <view class="title"> 五、活动结束后行为自律 </view>
    <view class="text">
      在相亲活动结束后，本人将仍遵守基本道德规范和行为约束，不会因此事而搭建其他不良交际平台，不会滥用或泄露对方的个人
      信息，不会对对方进行人身攻击谩骂等不良行为。
    </view>
    <view class="text">
      以上五点声明，本人郑重承诺，本人的行为将遵守以上规范，如有违反，本人愿意承担相应的法律法规和组织规则的处理措施。
      最后，本人再次强调，此承诺书是本人自愿签署的，并愿意接受对此承诺的任何后果。
    </view>
  </scroll-view>
  <view class="foot">
    <view class="footText">
      <checkbox-group @change="changeChange">
        <label> <checkbox :checked="flag" /> 是否同意勾选相亲活动承诺书 </label>
      </checkbox-group>
    </view>
    <button :class="flag ? 'btn' : 'btn disable'" :disabled="!flag" @click="click">
      {{ flag && isYes ? '已同意' : '同意' }}
    </button>
  </view>
  <!--  确认弹框 -->
  <uni-popup ref="alertDialog" type="dialog">
    <uni-popup-dialog
      type="center"
      cancelText="取消"
      confirmText="同意"
      :content="text"
      @confirm="dialogConfirm"
      @close="dialogClose"
    ></uni-popup-dialog>
  </uni-popup>
</template>

<style scoped lang="scss">
.commitment {
  width: 100vw;
  height: 90vh;
  padding: 3%;
  box-sizing: border-box;

  .titleHeader {
    font-size: 35rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .textFrist {
    color: #9a9a9a;
    font-size: 30rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
  }

  .title {
    color: #9a9a9a;
    font-size: 30rpx;
    font-weight: 500;
    text-indent: 20rpx;
    margin-bottom: 20rpx;
  }

  .text {
    color: #9a9a9a;
    font-size: 29rpx;
    line-height: 1.6;
    text-indent: 40rpx;
    margin-bottom: 20rpx;
  }
}

.foot {
  width: 100%;
  height: 10vh;
  padding-left: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;

  .footText {
    color: #4cade2;
    font-size: 25rpx;
  }

  .btn {
    width: 25vw;
    color: #fff;
    font-size: 30rpx;
    border-radius: 50rpx;
    background: linear-gradient(to right, #4cade2, #51aee3, #9dd3e9);
  }

  .disable {
    background: #ccc;
  }
}
</style>
